<template>
  <div>
    <div v-for="item in paperItems" :key="item.id">
      <PaperItemRender :itemData="item" @renderComplete="renderComplete" />
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import axios from "axios";
import PaperItemRender from "./PaperItemRender.vue";
import PaperHeader from './PaperHeader.vue'
const uuidv4 = require("uuid/v4");

const axiosInstant = axios.create({
  withCredentials: true,
  baseURL: "http://localhost:3002/"
});

export default {
  data() {
    return {
      paperHeight: 800,
      paperWidth: 600,
      paperGap: 50,
      spoolModels: [],
      paperItems: [],
      papers: []
    };
  },
  methods: {
    renderComplete({ id, height }) {
      const item = this.paperItems.find(item => item.id === id);
      item.height = height;
    }
  },
  mounted() {
    axiosInstant.get("/paperData").then(res => {
      this.spoolModels = res.data.datas.spoolModels;
      const paperItems = [];
      this.spoolModels.forEach(paperSection => {
        const item = {
          type: "section",
          content: paperSection.numberOfPaperName,
          id: uuidv4()
        };
        paperItems.push(item);
        if (paperSection.testPaperPlates) {
          paperSection.testPaperPlates.forEach(plate => {
            const item = {
              type: "plate",
              content: plate.typeName,
              id: uuidv4()
            };
            paperItems.push(item);
            plate.question.forEach(question => {
              const item = {
                type: "question",
                questionType: question.type,
                content: question.remark,
                id: uuidv4(),
                question: question,
                component: Question
              };
              paperItems.push(item);
            });
          });
        }
      });
      console.log("paperItems", paperItems);
      paperItems.unshift({
        type: "header",
        id: uuidv4(),
        component: PaperHeader
      })
      this.paperItems = paperItems;

      setTimeout(() => {

        const paperHeight = this.paperHeight
        this.paperItems.forEach((item, index) => {
          var start = 0;
          for (var i = 0; i < index; i++) {
            start += this.paperItems[i].height
          }
          item.start = start
          item.end = start + item.height
        });
        console.log("paperItems", this.paperItems);
        // const papers = [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []];
        // this.paperItems.forEach(element => {
        //   const paperNum = Math.max(Math.ceil(element.start / paperHeight), 1)
        //   papers[paperNum - 1].push(element)
        // });
        // console.log('papers', papers);
        // this.papers = papers
      }, 1000);
    });
  },
  computed: {
  },
  components: { PaperItemRender }
};
</script>

<style lang="css">
/* .break-page {
  background: grey;
}
.paper-item{
  position: absolute;
}
.paper-wrapper {
  background: goldenrod;
  border-radius: 15px;
} */
</style>